<template>
  <div class="register_container">
    <div class="register_box">
            <!-- 登录表单区 -->
      <el-form ref="registerFormRef"
               :model="userInfo"
               class="registerForm"
               :rules="rules">
        <!-- 邮箱 -->
        <el-form-item prop="umail">
          <el-input placeholder="请输入邮箱" v-model="userInfo.umail"
                    prefix-icon="iconfont icon-morentouxiang"></el-input>
        </el-form-item>
        <el-form-item prop="uphone">
          <el-input placeholder="请输入手机号码" v-model="userInfo.uphone"
                    prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="upwd">
          <el-input placeholder="请输入注册密码" v-model="userInfo.upwd"
                    prefix-icon="iconfont icon-3702mima"
                    type="password" show-password></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input placeholder="请再次输入密码" v-model="userInfo.checkPass"
                    prefix-icon="iconfont icon-3702mima"
                    type="password" show-password></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input placeholder="请输入验证码" v-model="userInfo.code"
                    prefix-icon="iconfont icon-lock_fill"
                    style="width: 70%"></el-input>
          <el-button class="codeBtn" @click="getCode">获取验证码</el-button>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary"
                     @click="onRegister">注册</el-button>
          <el-button type="info"
                     @click="resetRegister">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {   
    data() {
      let validatePass = (rules, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.userInfo.checkPass !== '') {
              this.$refs.registerFormRef.validateField('checkPass');
          }
          callback();
        }
      };
      let validatePass2 = (rules, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.userInfo.upwd) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
      };
      return{
        userInfo: {
          umail: '',
          upwd: '',
          checkPass: '',
          code: '',
          uphone: ''
        },
        //表单验证规则对象
        rules: {
          //验证验证码是否合法
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { pattern: /^\d{6}$/, message: '验证码只能为6位数字', trigger: 'blur'}
          ],
          //验证邮箱是否合法
          umail: [
            { required: true, message: '请输入注册邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ],
          upwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 9,  message: '长度在 6 到 9 个字符', trigger: 'blur', },
            { validator: validatePass, trigger: 'blur' }     
          ],
          //验证密码是否合法
          checkPass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur', required: true } 
          ],    
          //验证电话号码是否合法
          uphone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { pattern: /^1[3/5/7/8/9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur', },
          ],   
        },
      }
    },
    methods:{
      onRegister(){
        this.$refs.registerFormRef.validate((valid) => {
          if (!valid) {
            return
          }
          this.doRegister()
        })
      },
      resetRegister(){
        this.$refs.registerFormRef.resetFields();
        this.$router.push('/login');
      },
      async getCode(){
        let url = 'api/userLogin/send/' + this.userInfo.umail;
        const {data: res} = await this.$axios.get(url);
        if(res.code !== 200){
          return this.$message.error(res.data);
        }
        return this.$message.success(res.data);
      },
      async doRegister(){
        let paramCode = this.$qs.stringify({
          code: this.userInfo.code
        })
        let url = 'api/userLogin/register' + '?' + paramCode;
        let paramUser = this.userInfo;
        const { data: res } = await this.$axios.post(url, paramUser);
        if (res.code !== 200) {
          return this.$message.error(res.data);
        }
        this.$router.push({
          path: '/login',
          query:{
              umail: this.userInfo.umail,
              upwd: this.userInfo.upwd
            }
        })
        return this.$message.success(res.data);
      },
    }
  };
</script>

<style lang="less" scoped>
.register_container {
  height: 100%;
  background-image: url('../assets/img/log-login.png');
  background-size: cover;
}
.register_box {
  width: 720px;
  height: 375px;
  background-color: #fff;
  border-radius: 3px;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.registerForm {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.codeBtn{
  margin-left: 13%;
}
</style>